<template>
  <section class="content-view wrapper">
    <h2 class="item-title">CSS</h2>
    <div class="spin-container">
      <spin size="20px" color="#ccc"/>
      <spin size="30px" color="#999"/>
      <spin size="40px" color="#666"/>
      <spin size="50px" color="#333"/>
    </div>

    <h2 class="item-title">SVG</h2>
    <div class="spin-container">
      <!-- 颜色要通过修改svg来实现，无法通过属性修改 -->
      <spin :svg-src="svgSrc" size="40px"/>
      <spin :svg-src="svgSrc" size="50px"/>
      <spin :svg-src="svgSrc" size="60px"/>
      <spin :svg-src="svgSrc" size="70px"/>
    </div>
  </section>
</template>

<script>
import { Spin } from 'hippius'

import svg from '@/assets/images/loading/rolling.svg'

export default {
  components: {
    Spin,
  },
  data () {
    return {
      svgSrc: svg,
    }
  },
}
</script>

<style lang="stylus" scoped>
.wrapper {
  padding: 20px 6%;

  .spin-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}
</style>
